.MonitorFrontBox {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;

	& > .options {
		width: 100%;
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 5;

		& > div {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 18px;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #ffffff;
			font-family: YouSheBiaoTiHei;

			&:first-child {
				margin-right: 64px;
			}
		}
	}

	.HomeMonitorList {
		margin: 0 auto;
		padding-top: 15px;
		width: calc(100% - 50px);
		height: calc(100% - 83px);
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		align-content: flex-start;
		position: relative;
		z-index: -1;

		.HomeMonitorListItem {
			margin: 5px;
			background: rgba(0, 0, 0, 0.3);
		}
		.MonitorNot {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			.ant-result-title {
				color: white;
			}
		}
	}

	.Pagination {
		margin: 15px auto;
		width: calc(100% - 176px);
		height: 30px;
	}
}

.TrailerBox {
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 45px;

	& > div {
		height: 100%;

		&.Video {
			flex: 1;
			margin-right: 30px;

			video {
				object-fit: fill;
			}
		}

		&.List {
			width: 360px;

			& > .swiper {
				height: 100%;

				.swiper-slide {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-evenly;
					flex-direction: column;
					transition: 0.33s;
					cursor: pointer;
					background-size: 100% 100%;

					&.active {
						img {
							border: 1px solid #f7c54d;
						}
					}

					img {
						display: block;
						width: 326px;
						height: calc(100% - 40px);
						object-fit: cover;
					}
				}
			}
		}
	}
}
